<template>
    <view class="my-multiple-select">
        <view class="input" @click="open">
            <view class="text" v-if="info !==''">
                {{info}}
            </view>
            <view v-else class="placeholder">
                {{placeholder}}
            </view>
            <uni-icons :type="show? 'top' : 'bottom'" size="14" color="#999" />
        </view>
        <MoMoMultipleSelect v-model="show" :data="list" :default-selected="defaultSelected" @confirm="confirm"
            :allShow="false" @onSearch="onSearch" ref="momo" :valueName="valueName">
        </MoMoMultipleSelect>
    </view>
</template>

<script>
    import MoMoMultipleSelect from "./momo-multiple-select/index";
    import fetch from "@/utils/fetch";

    export default {
        name: 'MultipleSelect',
        components: {
            MoMoMultipleSelect,
        },
        props: {
            value: {
                type: Array,
                default: () => {
                    return [];
                }
            },
			defaultSelected: {
                type: Array,
                default: () => {
                    return [];
                }
            },
            placeholder: {
                type: String,
                default: '请选择'
            },
            requestMethod: {
                type: String,
                default: 'get'
            },
			valueName: {
                type: String,
                default: 'value'
            },
            requestUrl: String,
            requestParams: {
                type: Object,
                default: () => {
                    return {};
                }
            },
            requestData: {
                type: Object,
                default: () => {
                    return {};
                }
            },
            initalItemProptities: {
                type: Object,
                default: () => {
                    return {};
                }
            }
        },
        data() {
            return {
                show: false,
                info: "",
                list: [],
                // defaultSelected: [], //默认选中项
            };
        },
        methods: {
            open() {
                this.show = true;
                this.$refs.momo.setKeyword(''); //这里会自动调接口
            },
            onSearch(keyword, cb) {
                fetch(this.requestMethod, this.requestUrl, {
                    ...this.requestParams,
                    name: keyword,
                }, {
                    ...this.requestData,
                    name: keyword
                }).then((res) => {
                    this.list = res.list.map((item) => ({
                        label: item.name + ' - ' + item.empno,
                        value: item.id,
                        item: item,
                        ...this.initalItemProptities
                    }));
                    cb && cb(this.list);
                });
            },
            confirm(value) {
                this.info = value.map((el) => el.label).join(",");
                this.$emit('input', value);
            },
        },
        mounted() {
            this.onSearch('', (list) => {
                const selectedArr = [];
                list.forEach(item => {
                    this.value.forEach((valueItem) => {
                        if (item.value === valueItem.value) {
                            selectedArr.push(item);
                        }
                    })
                })
                if (selectedArr.length !== 0) {
                    this.info = selectedArr.map((el) => el.label).join(",");
                    this.$emit('input', selectedArr);
                }
            });
        }
    }
</script>

<style scoped lang="scss">
    .my-multiple-select {
        height: 8rem;
        width: 100%;
        position: relative;

        .input {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px solid #ccc;
            border-radius: 1rem;
            padding: 0 2rem;
            font-size: 2rem;

            .text {
                font-size: 2rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding: 0 2rem 0 0;
            }

            .placeholder {
                font-size: 2rem;
                color: #c0c4cc;
            }

            .uni-icons {
                font-size: 3rem !important;
                line-height: 3rem !important;
            }
        }
    }
</style>